<template>
  <div class="warn_detail">
    <van-nav-bar :title="alarmTypeEnum[warnInfo.alarmType]" left-arrow>
      <template #left>
        <img :src="left" @click="onBack" class="nav_left" />
      </template>
    </van-nav-bar>
    <div class="warn_title">
      <div>{{ alarmTypeEnum[warnInfo.alarmType] || '-' }}</div>
      <div v-if="warnInfo.status === '1'" class="tip">待处理</div>
    </div>
    <div class="cell_group">
      <van-cell title="所属检测阵" :value="warnInfo.structureName || '-'" />
      <van-cell title="触发告警测点" :value="warnInfo.pointName || '-'" />
      <van-cell title="告警时间" :value="warnInfo.alarmTime || '-'" />
      <van-cell title="告警内容">
        <template #value>
          <div class="warn_info">
            {{
              (warnInfo.pointName || '') +
              '触发' +
              alarmTypeEnum[warnInfo.alarmType] +
              ',' +
              (warnInfo.handleState == '0' ? '请处理' : '请查收')
            }}
          </div>
        </template>
      </van-cell>
    </div>
    <div class="fixed">
      <van-button
        type="primary"
        @click="onOpen(warnInfo)"
        v-if="warnInfo.alarmType == '1' && warnInfo.handleState == '0'"
        >处理</van-button
      >
      <van-button
        type="primary"
        @click="onView(warnInfo)"
        v-if="warnInfo.alarmType != '1' && warnInfo.isReport == '1'"
        >触发报告</van-button
      >
    </div>
  </div>
  <van-dialog v-model:show="show" show-cancel-button @confirm="onConfirm">
    <div class="dialog_body">
      <div class="info">是否误报</div>
      <div class="checked">
        <van-radio-group v-model="form.isFalseAlarm" direction="horizontal">
          <van-radio name="1">是</van-radio>
          <van-radio name="0">否</van-radio>
        </van-radio-group>
      </div>
    </div>
  </van-dialog>

  <van-dialog v-model:show="visible" title="报告">
    <pdfView :src="pdfSrc" />
  </van-dialog>
</template>
<script lang="ts">
export default {
  name: 'warn_detail',
}
</script>
<script setup lang="ts">
import router from '@/router'
import { useRoute } from 'vue-router'
import { computed, ref } from 'vue'
import left from '@/assets/images/left.png'
import { handleAlarm } from '@/api/warn'
import { showToast } from 'vant'
import { downloadGenerateById } from '@/api/output'
import { alarmRuleDetail } from '@/api/warn'
const alarmTypeEnum: any = {
  1: '设备告警',
  2: '测点告警',
  3: '区域告警',
  4: '地震告警',
}
const pdfSrc = ref('')
const route = useRoute()
const id = computed(() => {
  return route.query?.id
})
const warnInfo = ref({})
const getInfo = async () => {
  const result = await alarmRuleDetail(id.value)
  warnInfo.value = result.data
}
getInfo()

//generateId
const show = ref(false)
const visible = ref(false)
const form = ref({
  isFalseAlarm: '1',
})
const onOpen = (form) => {
  show.value = true
}
const onConfirm = async () => {
  form.value.id = warnInfo.value.id
  console.log(form.value)
  const result = await handleAlarm(form.value)
  if (result.code == 200) {
    warnInfo.value.handleState = '1'
  }
}

const onView = async ({ generateId }) => {
  if (!generateId) {
    return showToast({
      message: '暂未生成报告!',
      position: 'top',
    })
  }
  const result = await downloadGenerateById(generateId)
  const blob = new Blob([result], { type: 'application/pdf' })
  pdfSrc.value = URL.createObjectURL(blob)
  visible.value = true
}
const onBack = () => {
  router.push('/warn')
}
</script>

<style lang="scss" scoped>
@mixin getStyle($size, $color, $weight) {
  font-size: $size;
  color: $color;
  font-weight: $weight;
}
.warn_title {
  display: flex;
  justify-content: space-between;
  padding: 36px 30px 24px;
  div {
    &:first-child {
      @include getStyle(28px, #78797a, 700);
    }
    &.tip {
      @include getStyle(28px, #ff5454, 700);
    }
  }
}
.warn_detail {
  background: #f5f5f5;
  min-height: 100%;
}
.nav_left {
  width: 44px;
  height: 44px;
}
:deep(.van-nav-bar__title) {
  @include getStyle(40px, #040c14, 700);
}
.cell_group {
  border-radius: 12px;
  overflow: hidden;
  width: calc(100% - 60px);
  margin: 0 auto;
}
:deep(.van-cell) {
  display: flex;
  justify-content: space-between;
  .van-cell__title {
    min-width: 150px;
    flex: none;
  }
  .van-cell__value {
    flex: 1;
    @include getStyle(30px, #040c14, 400);
  }
}
.warn_info {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;

  width: 100%;

  word-break: break-all;
  white-space: normal;
}
.fixed {
  width: 100%;
  padding: 26px 48px 42px;
  position: fixed;
  bottom: 0;
  background-color: #fff;
  :deep(.van-button) {
    width: 100%;
    background-color: #0f95af;
    // border-radius: 10px 10px 10px 10px;
    // border: 1px solid #dbdbdb;
    border: none;
    .van-button__text {
      @include getStyle(34px, #fff, 700);
    }
    // &:hover {
    //   background-color: #0f95af;
    //   border: none;
    //   .van-button__text {
    //     color: #fff;
    //   }
    // }
  }
}
.dialog_body {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  .info {
    @include getStyle(36px, #121212, 700);
    margin: 80px 0;
  }
  .checked {
    margin-bottom: 80px;
    :deep(.van-radio-group) {
      width: 320px;
      display: flex;
      height: 60px;
      justify-content: space-between;
      .van-radio {
        display: flex;
        align-items: center;
      }
      .van-radio__icon {
        height: fit-content;
        .van-icon {
          width: 48px;
          height: 48px;
          border: 2px solid #121212;
          &.van-icon-success {
            background-color: #fff;
            position: relative;
          }
        }
        &.van-radio__icon--checked {
          .van-icon {
            &::before {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              content: '';
              display: block;
              width: 18px;
              height: 18px;
              border-radius: 50%;
              background: #000;
            }
          }
        }
      }
    }
  }
}
</style>
<style>
.van-dialog__footer {
  .van-button {
    &:first-child {
      border-top: 1px solid #000;
      border-right: 1px solid #000;
    }
    &:last-child {
      border-top: 1px solid #000;
    }
  }
}
</style>
